import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Shapes 1.15
import FluentUI
import "qrc:/component"

FluContentPage {

    title:"任务追踪"

    function treeData(){
        const dig = (path = '0', level = 4) => {
            const list = [];
            for (let i = 0; i < 6; i += 1) {
                const key = `${path}-${i}`;
                const treeNode = {
                    title: key,
                    key,
                };
                if (level > 0) {
                    treeNode.children = dig(key, level - 1);
                }
                list.push(treeNode);
            }
            return list;
        };
        return dig();
    }

    component SessionItem:Rectangle{
        property bool selected: control.currentSession === display
        id:control_session
        height: 65
        width: 250
        color:{
            if(control_session.selected){
                return FluTheme.itemCheckColor
            }
            if(mouse_area_session.containsMouse)
                return FluTheme.itemPressColor
            return FluTheme.itemNormalColor
        }
        Shape {
            width: 14
            height: 14
            anchors{
                right: parent.right
                top: parent.top
            }
            visible: display.stayTop
            ShapePath {
                fillColor: FluTheme.primaryColor
                strokeWidth: 0
                strokeColor: "#00000000"
                startX: 14; startY: 14
                PathLine { x: 14; y: 0 }
                PathLine { x: 0; y: 0 }
                PathLine { x: 14; y: 14 }
            }
        }
        //        AvatarView{
        //            id:item_avatar
        //            width: 42
        //            height: 42
        //            userInfo: display.user
        //            anchors{
        //                verticalCenter: parent.verticalCenter
        //                left: parent.left
        //                leftMargin: 12
        //            }
        //        }
        //        FluText{
        //            id:item_session_name
        //            text: display.user.name
        //            maximumLineCount: 1
        //            elide: Text.ElideRight
        //            anchors{
        //                top: item_avatar.top
        //                topMargin: 2
        //                left: item_avatar.right
        //                leftMargin: 10
        //                right: item_session_time.left
        //                rightMargin: 10
        //            }
        //        }
        //        FluText{
        //            id:item_session_time
        //            text: display.time
        //            anchors{
        //                verticalCenter: item_session_name.verticalCenter
        //                right: parent.right
        //                rightMargin: 10
        //            }
        //            color:FluTheme.fontTertiaryColor
        //        }

        //        Row{
        //            id:item_layout_text
        //            spacing: 5
        //            anchors{
        //                bottom: item_avatar.bottom
        //                left: item_avatar.right
        //                leftMargin: 10
        //                right: item_session_unreadcount.left
        //                rightMargin: 10
        //            }
        //            clip: true
        //            height: 16
        //            TextArea{
        //                id:item_session_text
        //                color:FluTheme.fontTertiaryColor
        //                width: Math.min(implicitWidth,control_session.width-100)
        //                font.pixelSize: 12
        //                wrapMode: Text.NoWrap
        //                padding: 0
        //                leftPadding: 0
        //                rightPadding: 0
        //                bottomPadding: 0
        //                topPadding: 0
        //                readOnly: true
        //                textFormat: Text.RichText
        //                verticalAlignment: Qt.AlignBottom
        //                text:EmoticonHelper.toEmoticonString(display.text,14)
        //            }
        //            Text{
        //                text:"..."
        //                color:FluTheme.fontTertiaryColor
        //                visible: item_session_text.implicitWidth>control_session.width-100
        //                font.pixelSize: 12
        //            }
        //        }

        //        Rectangle{
        //            id:item_session_unreadcount
        //            width: visible ? 18 : 0
        //            height: 18
        //            radius: 10
        //            visible: display.unreadCount !== 0
        //            color:Qt.rgba(255/255,77/255,79/255,1)
        //            anchors{
        //                verticalCenter:item_layout_text.verticalCenter
        //                right: parent.right
        //                rightMargin: 10
        //            }
        //            Text{
        //                text: Math.min(display.unreadCount,99)
        //                font.pixelSize: 10
        //                color: FluColors.White
        //                anchors.centerIn: parent
        //            }
        //        }
        //        MouseArea{
        //            id:mouse_area_session
        //            acceptedButtons: Qt.LeftButton | Qt.RightButton
        //            anchors.fill: parent
        //            hoverEnabled: true
        //            onClicked:
        //                (event)=>{
        //                    if(event.button === Qt.LeftButton){
        //                        if(control.currentSession === display){
        //                            return
        //                        }
        //                        control.saveMessageDraft()
        //                        control.currentSession = display
        //                    }else{
        //                        menu_item_session.showMenu(display)
        //                    }
        //                }
        //        }
    }

    Item{
        id:layout_session
        width: 250
        //        Item{
        //            id:layout_session_top_bar
        //            width: parent.width
        //            height: 60
        //            FluTextBox{
        //                id:textbox_search
        //                width: 200
        //                iconSource: FluentIcons.Search
        //                placeholderText: "搜索"
        //                anchors{
        //                    bottom: parent.bottom
        //                    bottomMargin: 8
        //                    left: parent.left
        //                    leftMargin: 10
        //                }
        //                cleanEnabled: false
        //                rightPadding: 60
        //                FluIconButton{
        //                    iconSource: FluentIcons.Cancel
        //                    iconSize: 12
        //                    anchors{
        //                        right: parent.right
        //                        rightMargin: 30
        //                        verticalCenter: parent.verticalCenter
        //                    }
        //                    iconColor: FluTheme.dark ? Qt.rgba(222/255,222/255,222/255,1) : Qt.rgba(97/255,97/255,97/255,1)
        //                    width: 30
        //                    height: 20
        //                    verticalPadding: 0
        //                    horizontalPadding: 0
        //                    visible: textbox_search.activeFocus
        //                    onVisibleChanged: {
        //                        if(!visible){
        //                            textbox_search.clear()
        //                        }
        //                    }
        //                    onClicked:{
        //                        textbox_search.focus = false
        //                    }
        //                }
        //            }
        //            FluIconButton{
        //                width: 24
        //                height: 24
        //                iconSize: 14
        //                verticalPadding: 0
        //                horizontalPadding: 0
        //                iconSource: FluentIcons.Add
        //                anchors{
        //                    bottom: parent.bottom
        //                    bottomMargin: 10
        //                    right: parent.right
        //                    rightMargin: 8
        //                }
        //                onClicked:{
        //                    showInfo("还在努力开发中...")
        //                }
        //            }
        //        }
        anchors{
            left: parent.left
            top: parent.top
            bottom: parent.verticalCenter
        }
        ListView{
            id:list_session
            anchors{
                left: parent.left
                right: parent.right
                top: parent.top
                topMargin: 18
                bottom: button_add_project.top
                bottomMargin: -10
            }
            boundsBehavior: ListView.StopAtBounds
            model: session_sort_model
            clip: true
            header:Item{
                height: visible ? 30 : 0
                width: list_session.width
                visible: IMManager.syncDataStatus === 1
                RowLayout{
                    anchors.centerIn: parent
                    FluProgressRing{
                        Layout.preferredWidth: 20
                        Layout.preferredHeight: 20
                        Layout.alignment: Qt.AlignVCenter
                        strokeWidth:4
                    }
                    FluText{
                        text: "收取中..."
                        Layout.alignment: Qt.AlignVCenter
                    }
                }
            }
            ScrollBar.vertical: FluScrollBar{}
            delegate: SessionItem{
            }
        }

        FluButton{
            id:button_add_project
            anchors.left: parent.Left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            text:"添加项目"
            onClicked: {
            }
        }
        FluButton{
            id:button_remove_project
            anchors.bottom:parent.bottom
            anchors.bottomMargin: 20
            anchors.right:parent.right
            text:"删除项目"
            onClicked: {
            }
        }

        FluDivider{
            anchors.top: parent.bottom
        }
    }

    Item{
        width: 250
        anchors.top: layout_session.bottom
        anchors.bottom:parent.bottom
        anchors.left: parent.left
        FluText{
            anchors.top: ring.bottom
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            text: "当前任务进度"
        }
        FluProgressRing{
            id:ring
            anchors.centerIn: parent
            progressVisible: true
            indeterminate: false
            value: (tree_view.selectionModel().length)/tree_view.count
        }

        FluButton{
            id:button_expand
            anchors.left: parent.Left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            text:"展开任务列表"
            onClicked: {
                tree_view.allExpand()
            }
        }
        FluButton{
            id:button_shrunk
            anchors.bottom:parent.bottom
            anchors.bottomMargin: 20
            anchors.right: parent.right
            text:"收起任务列表"
            onClicked: {
                tree_view.allCollapse()
            }
        }
    }

    FluArea{
        id:tree
        anchors{
            left: layout_session.right
            leftMargin: 20
            top: parent.top
            bottom:parent.bottom
            right: parent.right
            rightMargin: 5
            topMargin: 5
            bottomMargin: 5
        }
        FluShadow{}
        FluTreeView{
            id:tree_view
            anchors.fill: parent
            cellHeight: 40
            draggable: false
            showLine: true
            checkable: true
            depthPadding: 40
            Component.onCompleted: {
                var data = treeData()
                dataSource = data
            }
        }
    }
}
